<template>
  <div>
    <minder-editor
      :import-json="importJson"
      :progress-enable="true"
      :tag-enable="true"
      :sequence-enable="true"
      :tags="tags"
      :move-enable="true"
      :disabled="false"
      :distinct-tags="tags"
      :height="500"
      :priority-count="4"
      :tag-edit-check="test"
      :priority-disable-check="test"
      @afterMount="afterMount()"
      :default-mold="3"
      @moldChange="handleMoldChange"
      @save="save">
      <el-button type="" size="mini" slot="right-menu">d</el-button>
      </minder-editor>
  </div>
</template>

<script>
import Vue from 'vue'
import minderEditor from "../components/plugin";
Vue.use(minderEditor) //开发测试

export default {
  name: "dev-test",
  data() {
    return {
      importJson: {
        "root": {
          "data": {
            "text": "test222",
            // "disable": true
          },
          "children": [
            {
              "data": { "text": "地图axxaaaa",
                disable: true,
                expandState: "collapse",
                // tagEnable: true,
                // allowDisabledTag: true,
                resource: ["模块1"]},
              "children": [
                {
                  "data": { "text": "地图axxaaaa",
                    disable: true,
                    allowDelete: true,
                    // tagEnable: true,
                    // allowDisabledTag: true,
                    resource: ["模块12"]}
                }]
            },
            { "data": {
              "text": "百科aa",
                "expandState":"collapse"}}
          ]
        },
        "template":"default"
      },
      tags:  ['模块1','用例']
    }
  },
  mounted() {

  },

  methods: {
    save(data) {
      console.log(data);
    },
    test() {
      // return () => {
        return false
      // };
    },
    handleMoldChange(a) {
      // console.log(a);
    },
    afterMount() {
      // minder.on('selectionchange ', function (env) {
      //   console.log('selectionchange');
      //   console.log(env);
      //   // let selectNodes = env.minder.getSelectedNodes();
      //   // if (selectNodes) {
      //   //   selectNodes.forEach((node) => {
      //   //     markChangeNode(node);
      //   //   })
      //   // }
      // });
      minder.on('contentchange', function (env) {
        console.log('contentchange');
        // console.log(env);
        let selectNodes = env.minder.getSelectedNodes();
        console.log(selectNodes);
        console.log("=====");

      });
      // minder.on('afterExecCommand', function (env) {
      //   console.log('afterExecCommand');
      //   console.log(env);
      // });
      // minder.on('preExecCommand', function (env) {
      //   console.log('preExecCommand');
      //   console.log(env);
      // });
      minder.on('beforeExecCommand', function (env) {
        console.log('beforeExecCommand');
        console.log(env);
      });

      this.addHotBox();

    },
    addHotBox() {

      let hotbox = window.minder.hotbox;
      let main = hotbox.state('main');
      main.button({
        position: 'ring',
        label: 'Test',
        key: '/',
        action: function () {
          alert("test")
        },
        enable: function () {
          return true;
        },
        beforeShow: function () {
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
